<template>
	<el-container>
		
		<el-container>
			<el-main class="nopadding">
				<el-container>
					<div v-show="screenVisible" class="table-screen-column">
						<el-form label-width="auto" label-position="right">
							<el-row :gutter="20">
							  <el-col :span="4">
							  	<el-form-item label="日志模块">
									<el-input v-model="search.module" placeholder="日志模块" clearable></el-input>
    							</el-form-item>
							  </el-col>
							  <el-col :span="4">
							  	<el-form-item label="日志标签">
        			                <el-input v-model="search.tag" placeholder="日志标签" clearable></el-input>
    							</el-form-item>
							  </el-col>
							  <el-col :span="4">
							  	<el-form-item label="接口路由">
        			                <el-input v-model="search.router" placeholder="接口路由" clearable></el-input>
    							</el-form-item>
							  </el-col>
							  <el-col :span="4">
							  	<el-form-item label="用户ID">
        			                <el-input v-model="search.uid" placeholder="用户ID" clearable></el-input>
    							</el-form-item>
							  </el-col>
							  <el-col :span="6">
							  	<el-form-item label="生成时间">
        			                <el-date-picker v-model="time_stamp" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
        			                 value-format="x" @change="changeTimeStamp"></el-date-picker>
    							</el-form-item>
							  </el-col>
							</el-row>
						</el-form>
					</div>
					
					<el-header>
						<div class="left-panel">
						</div>
						<div class="right-panel">
							<div class="right-panel-search">
								<el-select v-model="search.level" clearable placeholder="日志等级" style="width: 140px;">
  								  <el-option value="notice"></el-option>
  								  <el-option value="error"></el-option>
  								  <el-option value="warning"></el-option>
  								</el-select>
								<el-select v-model="search.port" clearable placeholder="端口日志" style="width: 140px;" @change="changePort">
  								  <el-option label="服务端日志" value="u"></el-option>
  								  <el-option label="客户端日志" value="m"></el-option>
  								</el-select>
								<el-button type="primary" icon="el-icon-search" plain @click="handleQuery">搜索</el-button>
								<el-button @click="resetQuery" icon="el-icon-refresh">重置</el-button>
								<el-button type="primary" link @click="screenVisible = !screenVisible">
        			    		  {{ screenVisible ? '关闭更多筛选' : '显示更多筛选'}}
        			    		  <el-icon><el-icon-arrow-down v-if="screenVisible" /><el-icon-arrow-up v-else /></el-icon>
        			    		</el-button>
							</div>
						</div>
					</el-header>
					
					<el-main class="nopadding">
						<el-table ref="table" v-loading="loading" :data="tableList" @selection-change="selectionChange" border height="100%">
							<el-table-column label="#" prop="id" width="100" align="center"></el-table-column>
							<el-table-column label="端口" prop="port" width="120">
								<template #default="scope">
									<el-tag v-if="scope.row.port=='u'" type="success">服务端</el-tag>
									<el-tag v-if="scope.row.port=='m'">客户端</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="日志等级" prop="level" width="120">
								<template #default="scope">
									<el-tag v-if="scope.row.level=='error'">error</el-tag>
									<el-tag v-else-if="scope.row.level=='notice'" type="success">notice</el-tag>
									<el-tag v-else-if="scope.row.level=='warning'" type="warning">warning</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="请求接口" prop="router" width="320"></el-table-column>
							<el-table-column label="请求方法" prop="method" width="100"></el-table-column>
							<el-table-column label="日志模块" prop="module" width="140">
								<template #default="scope">
									<el-tag v-if="scope.row.module=='1'">默认</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="日志信息" prop="message"></el-table-column>
							<el-table-column label="日志标签" prop="tag" width="160"></el-table-column>
							<el-table-column label="用户ID" prop="uid" width="120"></el-table-column>
							<el-table-column label="生成时间" prop="created_at" width="140"></el-table-column>
							<el-table-column label="操作" fixed="right" align="center" width="80">
								<template #default="scope">
									<el-button-group>
										<el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
									</el-button-group>
								</template>
							</el-table-column>
						</el-table>
					</el-main>
					<el-footer>
						<sc-page v-model="search"></sc-page>
					</el-footer>
				</el-container>
			</el-main>
		</el-container>
	</el-container>

	<info-dialog v-if="dialog.info" ref="infoDialog" @success="handleSaveSuccess" @closed="dialog.info=false"></info-dialog>
</template>

<script>
	import infoDialog from './info'

	export default {
		name: 'systemlog',
		components: {
			infoDialog
		},
		data() {
			return {
				infoDrawer: false,
				dialog: {
					info: false,
				},
				loading: true,
				echartsLoding: false,
				tableList: [],
      			total: 0,
				selection: [],
				search: {
					page: 1,
        			pageSize: 20,
					total: 0,
					paging: 0,
        			module: undefined,
        			level: undefined,
        			tag: undefined,
        			router: undefined,
        			method: undefined,
        			uid: undefined,
        			port: undefined,
                    time_stamp: ''
				},
                time_stamp: [],
				screenVisible: false,
			}
		},
		mounted() {
			this.handleQuery()
		},
		watch: {
        	"search.paging": function() {
				this.handleQuery()
			},
		},
		methods: {
			//获取列表
			async getTableList() {
				this.loading = true
				var res = await this.$API.system.log.systemList.get(this.search)
				this.loading = false
				if(res.code == 200) {
					this.tableList = res.data.rows
					this.search.total = res.data.total
				} else {
					this.$alert(res.message, "提示", {type: 'error'})
				} 
			},
			//搜索
			handleQuery() {
				this.getTableList()
			},
			//重置搜索
			resetQuery() {
				this.search = {
        			module: undefined,
        			level: undefined,
        			tag: undefined,
        			router: undefined,
        			method: undefined,
        			uid: undefined,
        			port: undefined,
                    time_stamp: ''
				}
                this.time_stamp = []
				this.handleQuery()
			},
			//查看
			table_show(row){
				this.dialog.info = true
				this.$nextTick(() => {
					this.$refs.infoDialog.open('show').setData(row, this.search)
				})
			},
			//表格选择后回调事件
			selectionChange(selection){
				this.selection = selection
			},
			//本地更新数据
			handleSaveSuccess(mode, search){
				if(mode !='show') {
					this.search = search
					this.handleQuery()
				}
			},
            //时间搜素
            changeTimeStamp(e) {
                this.search.time_stamp = e.toString()
            },
			//切换端口
			changePort() {
				this.handleQuery()
			}
		}
	}
</script>

<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child { margin-bottom: 0;}
  }
  .el-col {border-radius: 4px;}
  .bg-purple-dark {background: #99a9bf;}
  .bg-purple {background: #d3dce6;}
  .bg-purple-light {background: #e5e9f2;}
  .grid-content {border-radius: 4px;min-height: 36px;}
  .row-bg {padding: 10px 0;background-color: #f9fafc;}
  .echarts-level {width:100px;}
  .echarts-level span { display:inline-block; width: 10px; height: 10px;}
  .echarts-level div:nth-child(1) span{ background-color: #3690e4;}
  .echarts-level div:nth-child(2) span{ background-color: #ce2a2a;}
  .echarts-level div:nth-child(3) span{ background-color: #eea435;}
</style>
